<template>
  <div class="wrap">
    <div class="logo" style="min-width: 200px">
      <img
        class
        style="width: 70px; height: 70px; float: left"
        src="../../assets/neteasecloud.png"
        alt="网易云"
      />
      <span style="display: block; height: 70px; line-height: 70px;min-width: 150px;"
        >网易云音乐</span
      >
    </div>
    <div class="search">
      <div class="arrow">
        <img src="../../assets/left-arrow.png" alt="左箭头" />
        <img src="../../assets/right-arrow.png" alt="右箭头" />
      </div>
      <div class="resource">
        <div class="search-input" style="min-width:200px;">
          <span class="search-icon">
            <img src="../../assets/search.png" alt="搜索" />
          </span>
          <input
            style="background: rgba(233, 57, 57, 0.8); border: none; outline: none;"
            type="text"
            placeholder="搜索"
            v-model="val"
            @keydown="search(val)"
          />
        </div>
        <div class="microphone">
          <img src="../../assets/microphone.png" alt="麦克风" />
        </div>
      </div>
    </div>
    <div class="message">
      <div class="portrait">
        <img src="../../assets/head.png" alt="头像" />
      </div>
      <span
        style="
          display: block;
          float: left;
          height: 70px;
          line-height: 70px;
          margin: auto 10px;
          color: #fff;
        "
        >未登录</span
      >
      <img
        style="width: 20px; height: 20px; float: left; margin-top: 24px"
        src="../../assets/dowm-arrow.png"
        alt="下箭头"
      />
      <span
        style="
          display: block;
          float: left;
          height: 70px;
          line-height: 70px;
          margin: auto 10px;
          color: #fff;
        "
        >开通VIP</span
      >
      <img class="smallico" src="../../assets/yifu.png" alt="衣服" />
      <img class="smallico" src="../../assets/shezhi.png" alt="设置" />
      <img class="smallico" src="../../assets/youxiang.png" alt="邮箱" />
    </div>
  </div>
</template>
<script>
import { reactive } from "vue";
import get from "@/utils/axios/index";
export default {
  name: "Header",
  setup(props, context) {
    const state = reactive({
      val: "",
    });
    var timer = null
    const search = (val) => {
      clearTimeout(timer);
       timer = setTimeout(() => {
        get(`/search?keywords=${val}`).then((res) => {
          console.log(res.result,'?')
          context.emit("searchlist", res.result);
        });
      }, 1000);
    };
    return {
      search,
    };
  },
};
</script>
<style lang="scss">
.wrap {
  width: 100%;
  height: 70px;
  min-width: 900px;
  background-color: #ec4141;
  .message {
    height: 100%;
    width: 30%;
    float: right;
    .smallico {
      float: left;
      margin: 20px 10px;
      height: 28px;
      width: 28px;
    }
    .portrait {
      float: left;
      height: 50px;
      width: 50px;
      margin-top: 10px;
      border-radius: 50%;
      img {
        float: left;
        height: 50px;
        width: 50px;
      }
    }
  }
  .search {
    height: 100%;
    white-space: nowrap;
    min-width: 400px;
    float: left;
    .arrow {
      float: left;
      height: 100%;
      // width: 30%;
      margin: 0 0px 0 20px;
      img {
        height: 20px;
        width: 20px;
        border: 1px solid rgba(168, 164, 164, 0.3);
        background: rgba(61, 55, 55, 0.1);
        border-radius: 20%;
        margin-top: 25px;
      }
    }
    .resource {
      float: left;
      height: 100%;
      min-width: 250px;
      width: 58%;
      .microphone {
        height: 70px;
        width: 10%;
        float: left;
        img {
          height: 20px;
          width: 20px;
          margin-top: 24px;
        }
      }
      .search-input {
        float: left;
        height: 60%;
        width: 80%;
        margin-top: 15px;
        border: 1px solid rgba(243, 125, 125, 0.4);
        border-radius: 63px;
        background: rgba(233, 57, 57, 0.8);
        .search-icon {
          display: block;
          float: left;
          margin-top: 9px;
          img {
            width: 20px;
            height: 20px;
          }
        }
        input {
          float: left;
          width: 80%;
          height: 20px;
          margin-top: 9px;
        }
      }
    }
  }
}
.logo {
  width: 10%;
  height: 100%;
  float: left;
  color: aliceblue;
  line-height: 70px;
}
</style>